<template>
	<view class="video-player">
		<video id="myVideo" :src="videoUrl" class="main-video" :title="videoInfo.title" :poster="coverUrl" autoplay
			:controls="true" :initial-time="memoryProgress ? memoryProgress : 0" :show-center-play-btn="true" :show-mute-btn="true"
			:enable-progress-gesture="false" :show-progress="false" :show-fullscreen-btn="false" picture-in-picture-mode="0"
			:enable-picture-in-picture="false" @error="handleVideoError" @ended="handleVideoEnd"
			@timeupdate="handleTimeUpdate"></video>

		<!-- 清晰度选择器 -->
		<view class="definition-selector" v-if="definitions.length > 1">
			<text v-for="def in definitions" :key="def.value"
				:class="['definition-item', { active: def.value === currentDefinition }]"
				@tap="switchDefinition(def.value)">
				{{ DEFINITION_MAP[def.value] || def.value }}
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'VideoPlayer',
		data() {
			return {
				videoContext: null,
				currentTime: 0,
				currentDefinition: '',
				DEFINITION_MAP: {
					AUTO: '自动',
					FD: '流畅',
					LD: '标清',
					SD: '高清',
					HD: '超清'
				}
			};
		},
		props: {
			// 视频信息
			videoInfo: {
				type: Object,
				required: true,
				default: () => ({
						videoUrl: '',
						coverUrl: '',
						title: '',
						definition: '',
						definitions: [],
				})
			},
			memoryProgress: Number
		},

		computed: {
			videoUrl() {
				return this.videoInfo.videoUrl || '';
			},
			coverUrl() {
				return this.videoInfo.coverUrl || '';
			},
			definitions() {
				return this.videoInfo.definitions || [];
			}
		},

		watch: {
			'videoInfo.definition'(newVal) {
				this.currentDefinition = newVal;
			},
			'videoInfo.videoUrl'() {
				this.$nextTick(() => {
					if (this.currentTime > 0) {
						this.seek(this.currentTime);
					}
				});
			}
		},

		created() {
			this.currentDefinition = this.videoInfo.definition;
		},

		mounted() {
			this.initVideoContext();
		},

		methods: {
			initVideoContext() {
				this.videoContext = uni.createVideoContext('myVideo', this);
			},

			handleVideoError(e) {
				console.error('视频播放错误:', e);
				this.$emit('error', e);
			},

			handleVideoEnd() {
				this.$emit('ended');
			},

			handleTimeUpdate(e) {
				if (e && e.detail && typeof e.detail.currentTime === 'number') {
					this.currentTime = e.detail.currentTime;
					this.$emit('timeupdate', e);
				}
			},

			switchDefinition(definition) {
				const playInfo = this.definitions.find(d => d.value === definition);
				if (playInfo && playInfo.playUrl) {
					this.$emit('switch-definition', {
						definition: playInfo.value,
						playUrl: playInfo.playUrl,
						currentTime: this.currentTime
					});
				}
			},

			seek(time) {
				if (this.videoContext && typeof time === 'number') {
					this.videoContext.seek(time);
				}
			},

			stop() {
				if (this.videoContext) {
					this.currentTime = 0;
					this.videoContext.stop();
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import 'VideoPlayer.scss';

	.video-player {
		position: relative;
		width: 100%;
		
		.definition-selector {
			position: absolute;
			right: 10px;
			bottom: 50px;
			display: flex;
			gap: 10px;
			padding: 5px;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 4px;
			
			.definition-item {
				color: #fff;
				font-size: 12px;
				padding: 2px 8px;
				border-radius: 2px;
				
				&.active {
					background: #007AFF;
				}
				
				&:not(.active):hover {
					background: rgba(255, 255, 255, 0.1);
				}
			}
		}
	}
</style>